import { setup } from "@/render"
import Container from "@/components/Container.vue"
import Button from '@/components/Button.vue'
import { rootActor } from "@/fsm/root"
import { getProp } from "@/plugins/xstatePlugin"

export const TestView = setup({
  types: {
    hehe: 'haha'
  },
  components: {
    Container,
    Button,
  },
  actors: {
    root: rootActor,
  },
  props: {
    handleClick: ({ root: {actor, send, selector} }) => {
      return () => {
        if (actor.getSnapshot().value === 'idle') {
          return send({
            type: 'START'
          })
        }
        return send({
          type: 'CHANGE'
        })
      }
    },
    text: ({root: {selector}}) => {
      return selector(snapshot => {
        // console.log('snapshot', snapshot)
        return `${snapshot.value}:${snapshot.context.times}`
      })
    }
  },
}).createView({
  type: 'Container',
  children: {
    default: {
      type: 'Button',
      props: {
        text: 'text',
        onClick: 'handleClick'
      },
      children: {
        
      }
    }
  }
})
